import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { Descriptions } from 'antd'
import moment from 'moment'
import axios from 'axios'
import { ArrowLeftOutlined } from '@ant-design/icons'
export default function Detail() {
  let params = useParams()
  const [newsInfo, setnewsInfo] = useState({})

  useEffect(() => {
    axios
      .get(`/news/${params.id}?_expand=category&_expand=role`)
      .then((res) => {
        setnewsInfo({
          ...res.data,
          view: res.data.view + 1,
        })

        return res.data
      })
      .then((res) => {
        axios.patch(`/news/${params.id}`, {
          view: res.view + 1,
        })
      })

  }, [params.id])

  return (
    <div>
      <h2>
        <ArrowLeftOutlined
          className="backIcon"
          onClick={() => window.history.back()}
        />
        <span className="backTitle">{newsInfo.title}</span>
      </h2>

      <Descriptions size="small" column={3}>
        <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>

        <Descriptions.Item label="发布时间">
          {newsInfo.publishTime
            ? moment(newsInfo.publishTime).format('YYYY/MM/DD HH:mm:ss')
            : '-'}
        </Descriptions.Item>
        <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>

        <Descriptions.Item label="访问数量">{newsInfo.view}</Descriptions.Item>
        <Descriptions.Item label="点赞数量">{newsInfo.star}</Descriptions.Item>
        <Descriptions.Item label="评论数量">0</Descriptions.Item>
      </Descriptions>

      <div
        dangerouslySetInnerHTML={{
          __html: newsInfo.content,
        }}
        style={{
          margin: '0 24px',
          border: '1px solid gray',
        }}
      ></div>
    </div>
  )
}
